<template>
  <div class="home-box">
    <!-- 顶部导航 -->
    <van-nav-bar
      fixed
      class="page-nav-bar"
    >
      <van-button
        icon="search"
        slot="title"
        round
        class="search-btn"
        to="/search"
      >搜索</van-button>
    </van-nav-bar>
    <!-- tab标签页面 -->
    <van-tabs
      v-model="active"
      animated
      swipeable
      class="channel-tabs"
    >
      <van-tab
        v-for="item in channels"
        :key="item.id"
        :title="item.name"
      >
        <article-list :channelId="item.id"></article-list>
      </van-tab>
      <!-- 固定定位和盒子 -->
      <div
        slot="nav-right"
        class="nav-right"
        @click="isPopupShow=true"
      >
        <i class="toutiao toutiao-gengduo"></i>
      </div>
      <!-- 背后占位 -->
      <div
        slot="nav-right"
        class="placeholder"
      ></div>
    </van-tabs>
    <!-- 弹出层 -->
    <van-popup
      v-model="isPopupShow"
      closeable
      position="bottom"
      close-icon-position='top-left'
      :style="{ height: '90%' }"
    >
      <channel-edit
        :channels='channels'
        :active='active'
        @sendData='getEditDataFn'
      ></channel-edit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user.js'
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
import { getItem } from '@/utils/storage.js'
export default {
  data () {
    return {
      active: 0,
      channels: [],
      isPopupShow: false
    }
  },
  methods: {
    // 获取用户频道列表
    async loadUserChannels () {
      // 获取本地数据
      const data = getItem('hmtt_channel')
      // 如果用户未登录  并且本地没有数据  才调接口请求数据
      if (!this.$store.state.user && data) {
        this.channels = data
      } else {
        try {
          const { data: res } = await getUserChannels()
          console.log(res.data)
          this.channels = res.data.channels
        } catch (error) {
          this.$toast('获取用户频道列表失败')
        }
      }
    },
    // 父向儿子传值的处理函数  ----跳转和关闭弹框
    getEditDataFn (e) {
      // 关闭弹窗
      this.isPopupShow = e.close
      this.active = e.index
    }

  },
  computed: {},
  watch: {},
  filters: {},
  components: {
    ArticleList,
    ChannelEdit
  },
  created () {
    this.loadUserChannels()
  },
  mounted () {
  }
}
</script>

<style scoped lang='less'>
.home-box {
  padding-bottom: 100px;
  padding-top: 174px;
}
/deep/.van-nav-bar__title {
  max-width: unset;
}
/deep/ .van-icon-search {
  color: #fff;
}
.search-btn {
  width: 555px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  border: none;
  color: #fff;
}
/deep/.channel-tabs {
  .van-tabs__wrap {
    position: fixed;
    top: 92px;
    z-index: 2;
    width: 100%;
  }
  // 每一个tab的样式
  .van-tab {
    height: 82px;
    min-width: 200px;
    border-right: 1px solid #edeff3;
    // 每一个tab下面文字的样式
    .van-tab__text {
      font-size: 28px;
      color: #777;
    }
  }
  // 激活状态的样式
  .van-tab--active {
    .van-tab__text {
      font-size: 30px;
      color: #333;
    }
  }
  // 条
  .van-tabs__line {
    width: 31px;
    height: 6px;
    background-color: #3296fa;
    border-radius: 3px;
    bottom: 8px;
  }
  // 条的父亲  也是每一个tab的父亲
  .van-tabs__nav {
    padding: 0;
  }
  .nav-right {
    width: 66px;
    height: 82px;
    position: fixed;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    .toutiao {
      font-size: 35px;
    }
    &::before {
      content: '';
      width: 2px;
      height: 82px;
      background-image: url(~@/assets/gradient-gray-line.png);
      position: absolute;
      left: 0;
      background-size: 100% 100%;
    }
  }
  .placeholder {
    width: 66px;
    height: 82px;
    flex-shrink: 0;
  }
}
</style>
